<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>节点访问-节点属性</h1>
    <hr>
    <ul id="books" title="这是一个书单" width="100"><!--8888-->
        <li>程序员必看书单</li>
        <li>第一阶段:</li>
        <li>《细说php》</li>123456789<li id="my">《MySQL必知必会》</li><!--6666666666--><li>《javascript权威指南》</li>
        <li>第二阶段:</li>
        <li>《教你怎么不生气》</li>
        <li>《佛经》</li>
        <li>《老子》</li>
        <li>《沉默的愤怒》</li>
        <li>第三阶段:</li>
        <li>《颈椎病康复指南》</li>
        <li>《腰椎间盘突出日常护理》</li>
        <li>《高血压降压宝典》</li>
        <li>《精神病症状学》</li>
        <li>第四阶段:</li>
        <li>《活着》</li>
    </ul>  

    <script>
        var books = document.getElementById('books');
        console.dir(document);
        console.dir(books);
        // 获取 标签里面所有内容
        console.dir(books.getAttributeNode('width'));
        // 获取 该元素节点里面的属性节点 

        console.dir(books.childNodes); // 获取所有子节点 其中空白字符和换行符也属于子节点
        // 注释也是属于子节点;
        console.dir(books.children.length);// 获取所有子属性 里面没有换行符和空白字符 只有 标签名和属性名

        console.dir(books.firstChild); // 获取第一个子节点
        console.dir(books.lastChild); // 获取最后一个子节点...不能把节点看作是html5语法

        console.dir(books.parentNode); // 获取父节点
        console.dir(books.parentElement);// 获取父级标签


        console.log(my);  //id为my的标签
        console.log(my.previousSibling);//获取id为my标签上一级节点
        console.log(my.nextSibling); // 获取id为my标签下一级节点

        console.log(document.nodeName); // 获取节点名;
        console.log(document.nodeValue);//获取节点值;
        console.log(document.nodeType); // 获取节点属性

        console.log('books: nodeName', books.nodeName); //节点名称
        console.log('books: nodeValue', books.nodeValue);//节点值
        console.log('books: nodeType', books.nodeType); // 节点属性见手册








    </script>  

</body>
</html>